<template>
  <div class="content">
    <dc-header :icon="'icon-header-back'" :title="'财务分析'" :rightIcon="''"></dc-header>
    <div class="content-body">
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate"></dc-date>
      <div class="common-card bg-white mt20">
        <dc-row class="pt40 pb40" type="flex" justify="space-around">
          <dc-col class="card-data" span="8">
            <tshSpan :value ='countData.totalIncome' class="num"></tshSpan>
            <!-- <span class="num">{{countData.totalIncome}}</span> -->
            <span class="label">总收入</span>
          </dc-col>
          <dc-col class="card-data" span="8">
            <tshSpan :value ='countData.totalExpend' class="num"></tshSpan>
            <!-- <span class="num">{{countData.totalExpend}}</span> -->
            <span class="label">总支出</span>
          </dc-col>
        </dc-row>
        <dc-row class="pt40 pb40" type="flex" justify="space-around">
          <dc-col class="card-data" span="8">
            <tshSpan :value ='countData.netMargin' class="num"></tshSpan>
            <!-- <span class="num">{{countData.netMargin}}</span> -->
            <span class="label">净利润</span>
          </dc-col>
          <dc-col class="card-data" span="8">
            <span class="num"><tshSpan :value ='countData.profitMargin'></tshSpan>%</span>
            <span class="label">净利率</span>
          </dc-col>
        </dc-row>
      </div>
      <component :is="charts" :timeFlag="currentDate.type" :beginTime="currentDate.startTime" :endTime="currentDate.endTime"></component>
    </div>
    </div>
  </div>
</template>

<script>
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  import monthType from './fMonthType';
  import yearType from './fYearType';
  import api from '@/common/api/financial';
  import date from '@/common/plugins/datetabbar/yearMonth';
  import store from '../../../vuex/store';
  export default {
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row,
      'dc-date': date,
      'dc-month': monthType,
      'dc-year': yearType
    },
    data () {
      return {
        countData: {totalIncome: 0, netMargin: 0, totalExpend: 0, profitMargin: 0},
        currentDate: {},
        charts: ''
      };
    },
    methods: {
      getDate (date) {
        if (date) {
          this.currentDate = date;
          this.charts = parseInt(date.type) === 3 ? 'dc-month' : 'dc-year';
          this.getBaseMsg();
        }
      },
      getBaseMsg () {
        let data = {
          groupCode: store.state.shopAlter.store.groupCode,
          timeFlag: this.currentDate.type || 3,
          beginTime: this.currentDate.startTime,
          endTime: this.currentDate.endTime
        };
        this._sysCount(data);
      },
      _sysCount (data) {
        api.getFinCount(data).then(res => {
          if (res) {
            this.countData = res;
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variable";

</style>
